<template>
  <el-dialog
    :title="resumeData.name + '简历' || '候选人简历'"
    :visible.sync="visible"
    width="850px"
    class="resume-dialog"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :top="top"
  >
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-state">
      <el-loading-spinner size="large"></el-loading-spinner>
      <p class="loading-text">加载简历中...</p>
    </div>

    <!-- 简历内容 -->
    <div v-else class="resume-container">
      <!-- 基本信息卡片 -->
      <div class="resume-card basic-info-card">
        <div class="left-section">
          <div class="avatar-container">
            <div
              class="rect-avatar"
              :style="{
                backgroundImage: `url(${resumeData.avatar || defaultAvatar})`,
              }"
            ></div>
            <div class="online-status" v-if="resumeData.phone">
              <i class="el-icon-circle-check"></i> 联系方式已验证
            </div>
          </div>
        </div>

        <div class="right-section">
          <div class="name-section">
            <h2 class="resume-name">{{ resumeData.name || "未知姓名" }}</h2>
            <el-tag
              :type="getEducationTagType(resumeData.education)"
              class="resume-education"
            >
              {{ formatEducation(resumeData.education) }}
            </el-tag>
          </div>

          <div class="basic-details">
            <div class="detail-row">
              <div class="detail-item">
                <i class="el-icon-user"></i>
                <span class="label">性别：</span>
                <span>{{ formatGender(resumeData.gender) }}</span>
              </div>
              <div class="detail-item">
                <i class="el-icon-date"></i>
                <span class="label">年龄：</span>
                <span>{{ resumeData.age || "未填写" }}</span>
              </div>
              <div class="detail-item">
                <i class="el-icon-calendar"></i>
                <span class="label">生日：</span>
                <span>{{ formatBirthDate(resumeData.birthDate) }}</span>
              </div>
            </div>

            <div class="detail-row">
              <div class="detail-item">
                <i class="el-icon-location"></i>
                <span class="label">所在地：</span>
                <span>{{ resumeData.location || "未填写" }}</span>
              </div>
              <div class="detail-item">
                <i class="el-icon-phone"></i>
                <span class="label">电话：</span>
                <span>{{ resumeData.phone || "未填写" }}</span>
              </div>
              <div class="detail-item">
                <i class="el-icon-id-card"></i>
                <span class="label">用户ID：</span>
                <span>{{ resumeData.userId || "未填写" }}</span>
              </div>
            </div>
          </div>

          <div class="expectation-section">
            <div class="expectation-item">
              <div class="expectation-icon">
                <i class="el-icon-office-building"></i>
              </div>
              <div class="expectation-content">
                <div class="expectation-label">期望行业</div>
                <div class="expectation-value">
                  {{ resumeData.expectedIndustry || "未填写" }}
                </div>
              </div>
            </div>
            <div class="expectation-item">
              <div class="expectation-icon">
                <i class="el-icon-data-analysis"></i>
              </div>
              <div class="expectation-content">
                <div class="expectation-label">期望职位</div>
                <div class="expectation-value">
                  {{ resumeData.expectedPosition || "未填写" }}
                </div>
              </div>
            </div>
            <div class="expectation-item">
              <div class="expectation-icon">
                <i class="el-icon-money"></i>
              </div>
              <div class="expectation-content">
                <div class="expectation-label">期望薪资</div>
                <div class="expectation-value">
                  {{ formatSalary(resumeData.expectedSalary) }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 个人优势卡片 -->
      <div class="resume-card advantages-card">
        <div class="card-header">
          <h3 class="card-title">
            <i class="el-icon-document-copy mr-2"></i>个人优势
          </h3>
        </div>
        <div class="card-content">
          <div class="advantage-text">
            <p
              v-if="
                resumeData.personalAdvantages &&
                resumeData.personalAdvantages.trim()
              "
            >
              {{ resumeData.personalAdvantages }}
            </p>
            <p v-else class="empty-advantage">
              <i class="el-icon-info-circle"></i> 暂无个人优势描述
            </p>
          </div>
        </div>
      </div>

      <!-- 项目经历卡片 -->
      <div class="resume-card experience-card" v-if="hasProjectExperience">
        <div class="card-header">
          <h3 class="card-title">
            <i class="el-icon-folder-opened mr-2"></i>项目经历
          </h3>
        </div>
        <div class="card-content">
          <div class="experience-list">
            <div
              class="experience-item"
              v-for="(
                project, index
              ) in resumeData.seekerProjectExperienceRespList"
              :key="project.id || index"
            >
              <div class="experience-header">
                <h4 class="experience-title">
                  {{ project.projectName || "未填写项目名称" }}
                </h4>
                <div class="experience-period">
                  {{ formatDate(project.createdAt) }} -
                  {{ formatDate(project.endAt || "至今") }}
                </div>
              </div>
              <div class="experience-role flex-item">
                <span class="experience-label">担任角色：</span>
                <span>{{ project.role || "未填写" }}</span>
              </div>
              <div class="experience-content flex-item">
                <span class="experience-label">项目详情：</span>
                <p>{{ project.projectDetail || "未填写项目详情" }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 工作经历卡片 -->
      <div class="resume-card experience-card" v-if="hasWorkExperience">
        <div class="card-header">
          <h3 class="card-title">
            <i class="el-icon-suitcase mr-2"></i>工作经历
          </h3>
        </div>
        <div class="card-content">
          <div class="experience-list">
            <div
              class="experience-item"
              v-for="(work, index) in resumeData.seekerWorkExperienceRespList"
              :key="work.id || index"
            >
              <div class="experience-header">
                <h4 class="experience-title">
                  {{ work.companyName || "未填写公司名称" }}
                </h4>
                <div class="experience-period">
                  {{ formatDate(work.createdAt) }} -
                  {{ formatDate(work.endAt || "至今") }}
                </div>
              </div>
              <div class="experience-role flex-item">
                <span class="experience-label">担任角色：</span>
                <span>{{ work.role || "未填写" }}</span>
              </div>
              <div class="experience-content flex-item">
                <span class="experience-label">工作内容：</span>
                <p>{{ work.workContent || "未填写工作内容" }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 无经验提示 -->
      <div
        class="resume-card skills-card"
        v-if="!hasProjectExperience && !hasWorkExperience"
      >
        <div class="card-header">
          <h3 class="card-title">
            <i class="el-icon-suitcase mr-2"></i>技能与经验
          </h3>
        </div>
        <div class="card-content">
          <div class="skills-placeholder">
            <i class="el-icon-folder-opened"></i>
            <p>当前暂无项目经历和工作经验信息</p>
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <el-button @click="closeDialog" class="close-btn">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { getSeekerResume } from "@/api/recuriter/seekerrecommend";

export default {
  name: "ResumeDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    userId: {
      type: [Number, String],
      required: true,
    },
  },
  data() {
    return {
      top: "10px",
      resumeData: {},
      loading: false,
      defaultAvatar:
        "https://cube.elemecdn.com/3/7c/3ea6beec6434fd293262dd8b1e36jpeg.jpeg",
    };
  },
  computed: {
    // 检查是否有项目经历
    hasProjectExperience() {
      return (
        this.resumeData.seekerProjectExperienceRespList &&
        this.resumeData.seekerProjectExperienceRespList.length > 0
      );
    },
    // 检查是否有工作经历
    hasWorkExperience() {
      return (
        this.resumeData.seekerWorkExperienceRespList &&
        this.resumeData.seekerWorkExperienceRespList.length > 0
      );
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.fetchResumeData();
      } else {
        this.resumeData = {};
      }
    },
    userId(val) {
      if (this.visible) {
        this.fetchResumeData();
      }
    },
  },
  methods: {
    async fetchResumeData() {
      if (!this.userId) return;

      this.loading = true;
      try {
        // 修正：使用正确的API方法名
        const res = await getSeekerResume(this.userId);
        if (res.data.code === 201) {
          this.resumeData = res.data.data || {};
          // 初始化可能为空的数组，避免报错
          if (!this.resumeData.seekerProjectExperienceRespList) {
            this.resumeData.seekerProjectExperienceRespList = [];
          }
          if (!this.resumeData.seekerWorkExperienceRespList) {
            this.resumeData.seekerWorkExperienceRespList = [];
          }
        } else {
          this.$message.error("加载简历失败：" + (res.data.msg || "未知错误"));
        }
      } catch (error) {
        console.error("接口请求失败：", error);
        this.$message.error("网络错误，无法加载简历");
      } finally {
        this.loading = false;
      }
    },

    formatEducation(education) {
      const educationMap = {
        UNDERGRADUATE: "本科",
        MASTER: "硕士",
        DOCTOR: "博士",
        HIGH_SCHOOL: "高中",
        VOCATIONAL: "专科",
        JUNIOR_HIGH: "初中",
        PRIMARY_SCHOOL: "小学",
        OTHER: "其他",
      };
      return educationMap[education] || "未知学历";
    },

    getEducationTagType(education) {
      const typeMap = {
        UNDERGRADUATE: "primary",
        MASTER: "success",
        DOCTOR: "warning",
        VOCATIONAL: "info",
        HIGH_SCHOOL: "info",
        JUNIOR_HIGH: "info",
        PRIMARY_SCHOOL: "info",
        OTHER: "info",
      };
      return typeMap[education] || "default";
    },

    formatGender(gender) {
      if (!gender) return "未填写";
      return gender === "MALE" ? "男" : gender === "FEMALE" ? "女" : gender;
    },

    formatBirthDate(dateStr) {
      if (!dateStr) return "未填写";
      const date = new Date(dateStr);
      if (isNaN(date.getTime())) {
        return "格式错误";
      }
      return date.toLocaleDateString("zh-CN");
    },

    formatDate(dateStr) {
      if (!dateStr) return "未知";
      const date = new Date(dateStr);
      if (isNaN(date.getTime())) {
        return "格式错误";
      }
      return `${date.getFullYear()}-${(date.getMonth() + 1)
        .toString()
        .padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
    },

    formatSalary(salary) {
      if (!salary || salary <= 0) return "薪资面议";
      return `${(salary / 1000).toFixed(1)}k/月`;
    },

    closeDialog() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style scoped>
.resume-dialog {
  --primary-color: #409eff;
  --light-gray: #f5f7fa;
  --text-gray: #606266;
  --border-color: #ebeef5;
}

.resume-dialog .el-dialog__header {
  background: linear-gradient(90deg, var(--primary-color), #66b1ff);
  color: white;
  padding: 15px 20px;
  border-radius: 6px 6px 0 0;
}

.resume-dialog .el-dialog__title {
  font-size: 18px;
  font-weight: 600;
}

.resume-dialog .el-dialog__headerbtn .el-dialog__close {
  color: white;
  transition: transform 0.2s;
}

.resume-dialog .el-dialog__headerbtn .el-dialog__close:hover {
  transform: scale(1.2);
}

/* 加载状态样式 */
.loading-state {
  text-align: center;
  padding: 60px 0;
}

.loading-text {
  margin-top: 15px;
  color: var(--text-gray);
  font-size: 14px;
}

.resume-container {
  padding: 15px 5px;
  max-height: 70vh;
  overflow-y: auto;
}

.resume-card {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
  margin-bottom: 18px;
  transition: all 0.3s ease;
  overflow: hidden;
}

.resume-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* 基本信息卡片 */
.basic-info-card {
  display: flex;
  padding: 20px;
  gap: 25px;
}

.left-section {
  width: 140px;
  flex-shrink: 0;
}

.avatar-container {
  position: relative;
  text-align: center;
}

/* 长方形头像样式 */
.rect-avatar {
  width: 100%;
  height: 220px;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  transition: transform 0.3s ease;
  margin-bottom: 12px;
}

.rect-avatar:hover {
  transform: scale(1.03);
}

.online-status {
  margin-top: 12px;
  font-size: 12px;
  color: #52c41a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 0;
  background-color: rgba(82, 196, 26, 0.1);
  border-radius: 4px;
}

.online-status i {
  font-size: 12px;
  margin-right: 4px;
}

.right-section {
  flex: 1;
  min-width: 0;
}

.name-section {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.resume-name {
  font-size: 24px;
  font-weight: 600;
  margin-right: 20px;
  color: #303133;
  position: relative;
}

.resume-name::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 3px;
  background-color: var(--primary-color);
  border-radius: 3px;
}

/* 基本详情 */
.basic-details {
  margin-bottom: 22px;
}

.detail-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 25px;
  margin-bottom: 12px;
}

.detail-item {
  display: flex;
  align-items: center;
  color: var(--text-gray);
  font-size: 14px;
  white-space: nowrap;
}

.detail-item i {
  color: var(--primary-color);
  margin-right: 8px;
  font-size: 15px;
}

.detail-item .label {
  color: #909399;
}

.expectation-section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 15px;
}

.expectation-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background-color: var(--light-gray);
  border-radius: 8px;
  transition: background-color 0.2s;
}

.expectation-item:hover {
  background-color: #eef2fa;
}

.expectation-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(64, 158, 255, 0.15);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.expectation-content {
  flex: 1;
  min-width: 0;
}

.expectation-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.expectation-value {
  font-size: 14px;
  color: var(--text-gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 个人优势卡片 */
.advantages-card,
.skills-card,
.experience-card {
  padding: 20px;
}

.card-header {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
  margin-bottom: 18px;
}

.card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  display: flex;
  align-items: center;
}

.card-title i {
  color: var(--primary-color);
}

.card-content {
  padding: 5px 0;
}

.advantage-text {
  line-height: 1.8;
  color: var(--text-gray);
  font-size: 14px;
  padding: 5px 0;
  min-height: 80px;
  display: flex;
  align-items: center;
}

.empty-advantage {
  color: #909399;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 20px 0;
  background-color: var(--light-gray);
  border-radius: 6px;
}

.empty-advantage i {
  margin-right: 8px;
  color: #c0c4cc;
}

/* 经验卡片样式 */
.experience-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.experience-item {
  padding: 15px;
  border-left: 3px solid var(--primary-color);
  background-color: var(--light-gray);
  border-radius: 0 6px 6px 0;
  position: relative;
}

.experience-item::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: white;
  border: 2px solid var(--primary-color);
  left: -7px;
  top: 20px;
}

.experience-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.experience-title {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.experience-period {
  font-size: 13px;
  color: #909399;
  white-space: nowrap;
}

.experience-role {
  margin-bottom: 10px;
  font-size: 14px;
}

.experience-content {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-gray);
}

.experience-label {
  color: #606266;
  font-weight: 500;
}

/* 技能与经验卡片 */
.skills-placeholder {
  text-align: center;
  padding: 30px 0;
  color: #909399;
  font-size: 14px;
  background-color: var(--light-gray);
  border-radius: 8px;
  margin: 5px 0;
}

.skills-placeholder i {
  font-size: 24px;
  color: #c0c4cc;
  margin-bottom: 10px;
  display: inline-block;
}

/* 底部按钮 */
.resume-dialog .el-dialog__footer {
  padding: 15px 20px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.close-btn {
  margin-right: 0;
}
.flex-item {
  display: flex;
  align-items: flex-start;
}

.experience-label {
  flex-shrink: 0;
  color: #606266;
  font-weight: 500;
}

.experience-value {
  flex: 1;
  color: var(--text-gray);
  word-break: break-word;
  margin: 0;
}
/* 响应式调整 */
@media (max-width: 768px) {
  .basic-info-card {
    flex-direction: column;
    align-items: center;
  }

  .left-section {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }

  .expectation-section {
    grid-template-columns: 1fr;
  }

  .detail-row {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
  }

  .detail-item {
    white-space: normal;
  }

  .experience-header {
    flex-direction: column;
    gap: 5px;
  }

  .experience-period {
    align-self: flex-start;
  }
}
</style>